<template>
	<view>
		<view style="padding: 0 30rpx;">
			<u-form ref="uForm">
				<u-form-item required label="收货人" :label-width="130">
					<input v-model="username" placeholder="请填写姓名" />
				</u-form-item>
			</u-form>
			<u-form ref="uForm">
				<u-form-item required label="手机号" :label-width="130">
					<input v-model="mobile" placeholder="请填写手机号" />
				</u-form-item>
			</u-form>

			<u-form ref="uForm">
				<view class="" @click="show = true">
					<u-form-item required label="所在地区" :label-width="130">
						<!-- <u-input v-model="mobile" placeholder="请填写手机号" /> -->
						<view class="show-address" style="color: #c0c0c0;" v-if="select_add.length > 0">
							<text class="address-item" v-if="select_add.length >= 1">
								{{select_add[0].name}}
							</text>
							<text class="address-item" v-if="select_add.length >= 2">
								{{select_add[1].name}}
							</text>
							<text class="address-item" v-if="select_add.length >= 3">
								{{select_add[2].name}}
							</text>
							<text class="address-item" v-if="select_add.length >= 4">
								{{select_add[3].name}}
							</text>
						</view>
						<view class="" style="color: #999;" v-else>
							请选择所在位置
						</view>
					</u-form-item>

				</view>
			</u-form>


			<u-form ref="uForm">
				<u-form-item required label="详细地址" :label-width="130">
					<input v-model="d_address" placeholder="例:1栋208" />
				</u-form-item>
			</u-form>
			<u-form ref="uForm">
				<u-form-item label="设置为默认收货地址" label-width="85%">
					<switch class="def" :checked="is_default == 1?true:false" color="#ff723b"
						style="transform:scale(0.7)" @change="switchChange($event)" />
				</u-form-item>
			</u-form>
		</view>

		<!-- 弹出层 -->
		<u-popup v-model="show" mode="bottom" :round="10" @close="closePopup">
			<view class="popup-box">
				<view class="address-titlr">选择地址</view>
				<view class="select_arrBox">
					<view v-if="select_add.length>=0" style="color:#000" @click="tapArea(0,select_add[0].parent_id)">
						<view class="select-item" v-if="select_add.length>=1">{{select_add[0].name}}</view>
						<view class="select-item" style="color: #ff723b;" v-else>请选择省/地区</view>
					</view>
					<view v-if="select_add.length>=1" style="color:#000" @click="tapArea(1,select_add[1].parent_id)">
						<view class="select-item" v-if="select_add.length>=2">{{select_add[1].name}}</view>
						<view class="select-item" style="color: #ff723b;" v-else>请选择市</view>
					</view>
					<view v-if="select_add.length>=2" style="color:#000" @click="tapArea(2,select_add[2].parent_id)">
						<view class="select-item" v-if="select_add.length>=3">{{select_add[2].name}}</view>
						<view class="select-item" style="color: #ff723b;" v-else>请选择县/区</view>
					</view>
					<view v-if="select_add.length>=3" style="color:#000" @click="tapArea(3,select_add[3].parent_id)">
						<view class="select-item" v-if="select_add.length>=4">{{select_add[3].name}}</view>
						<view class="select-item" style="color: #ff723b;" v-else>请选择镇/街道</view>
					</view>
					<view class="tmTop"></view>
				</view>
				<scroll-view class="scroll" scroll-y="true">
					<view class="scrollView" v-for="(item,index) in province" :key="index"
						@click="selectArea(item.name,item.id,item.level,item.parent_id)">{{item.name}}</view>
					<view class="" style="height: 50rpx"></view>
				</scroll-view>
			</view>
			<view class="tmBottom"></view>
		</u-popup>

		<view class="but" @click="submit">
			保存信息
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				show: false,
				username: '',
				mobile: '',
				d_address: '',
				type: '',
				select_add: [],
				address_code: '',
				province: [],
				// 防抖状态
				throttleStatus: false,
				is_default: 0,
				item_id: '',
				type: ''

			}
		},
		onLoad(e) {
			console.log(e);
			this.getAddress(0, 1)
			if (e.type == 1) {
				this.item_id = e.item_id
				this.type = e.type
				this.getEditData(e.item_id)
			}
		},
		methods: {
			getEditData(Lid) {
				this.$ajaxRequest.get(this.baseUrl + 'shop/Member/findAddress', {
					Lid: Lid
				}, true).then(res => {
					console.log('编辑数据', res.data.data)
					if (res.data.code == 200) {
						let selectData = res.data.data.selectData
						let listData = res.data.data.addressData
						this.username = listData.name
						this.mobile = listData.phone
						this.select_add = selectData
						this.d_address = listData.detailed_address
						this.is_default = listData.is_default
						console.log('修改的地址数据', this.select_add);

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getAddress(select_id, select_level) {
				this.$ajaxRequest.get(this.baseUrl + 'shop/Member/Area', {
					select_id: select_id,
					select_level: select_level
				}, true).then(res => {
					console.log('省市区镇', res)
					if (res.data.code == 200) {
						this.province = res.data.data

					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},

			selectArea(select_name, select_id, select_level, select_pid) {
				if (this.throttleStatus) {
					return false
				}
				let obj = {}
				if (select_level == 1) {
					// let province = []
					// province.name = select_name
					// province.level = select_level
					// province.id = select_id
					// this.select_add.province = province

					obj.name = select_name
					obj.level = select_level
					obj.id = select_id
					obj.parent_id = select_pid
					this.select_add.push(obj)
					this.getAddress(select_id, 2)
				} else if (select_level == 2) {
					obj.name = select_name
					obj.level = select_level
					obj.id = select_id
					obj.parent_id = select_pid
					this.select_add.push(obj)
					this.getAddress(select_id, 3)
				} else if (select_level == 3) {
					obj.name = select_name
					obj.level = select_level
					obj.id = select_id
					obj.parent_id = select_pid
					this.select_add.push(obj)
					this.getAddress(select_id, 4)
				} else if (select_level == 4) {
					obj.name = select_name
					obj.level = select_level
					obj.id = select_id
					obj.parent_id = select_pid
					this.select_add.push(obj)
					if (this.select_add.length > 4) {
						this.select_add.splice(this.select_add.length - 2, 2, obj);
					}
					this.closePopup()
				}
				console.log('啊我放大而无法大王', this.select_add);
				this.throttleStatus = true
				setTimeout(() => {
					this.throttleStatus = false
				}, 800)
			},

			tapArea(index, pid) {
				if (index == 0) {
					this.getAddress(pid, 1)
				} else if (index == 1) {
					this.getAddress(pid, 2)
				} else if (index == 2) {
					this.getAddress(pid, 3)
				} else if (index == 3) {
					this.getAddress(pid, 4)
				}
				this.select_add.splice(index, 4);
			},

			submit() {
				let reg = /^1[0123456789]\d{9}$/
				console.log('ok')
				if (this.username == '') {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
				} else if (this.mobile == '') {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})

				} else if (this.mobile != '' && !reg.test(this.mobile)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
				} else if (this.select_add.length < 4) {
					uni.showToast({
						title: '请填写地址',
						icon: 'none'
					})
				} else {
					this.saveInfo()
				}
			},
			// 关闭弹窗
			closePopup() {
				this.show = false;
			},
			//开关 是否默认读者
			switchChange(e) {
				if (e.detail.value) {
					this.is_default = 1
				} else {
					this.is_default = 0
				}
			},
			saveInfo() {
				this.$ajaxRequest.post(this.baseUrl + 'shop/Member/address', {
					type: this.type,
					id: this.item_id,
					uid: uni.getStorageSync('UserInfo').id,
					username: this.username, //名字
					phone: this.mobile, //手机
					province: this.select_add[0].name, //省
					city: this.select_add[1].name, //市
					area: this.select_add[2].name, //区
					town: this.select_add[3].name, //街道
					address_code: this.select_add[3].id, //最后级地区id
					d_address: this.d_address, // 详细地址
					is_default: this.is_default //默认地址
				}, true).then(res => {
					if (res.data.code == 200) {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							success() {
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.show-address {
		width: 97%;

		.address-item {
			color: #000;
			margin: 0 5rpx;
		}
	}
	.tmBottom {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		height: 40rpx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
		z-index: 2;
	}

	.popup-box {
		.address-titlr {
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			justify-content: center;
		}

		.select_arrBox {
			display: flex;
			position: relative;

			.select-item {
				height: 50;
				margin: 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.tmTop {
				position: absolute;
				bottom: -38rpx;
				width: 100%;
				height: 40rpx;
				background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
				z-index: 2;
			}
		}
	}

	.scroll {
		height: 900rpx;

		.scrollView {
			margin: 20rpx 20rpx;
			font-size: 30rpx;
		}
	}



	.but {
		position: fixed;
		bottom: 30rpx;
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(-17deg, rgba(255, 114, 59, 1), rgba(255, 147, 67, 1));
		border-radius: 45rpx;
		left: 30rpx;
		text-align: center;
		line-height: 90rpx;
		color: white;
	}
</style>
